<template>
  <div class="layer-box">
    <!-- 上方按钮 -->
    <div class="btn-top">
      <div class="btn-top-heard" @click="searchBtn(1)">
        <span class="btn-img-left"></span>
        <span class="btn-text">矢量图层</span>
        <span
          class="btn-img-right"
          :class="{ active: btnShow === 1 ? true : false }"
        ></span>
      </div>
      <div class="btn-top-body" v-if="btnShow === 1">
        <!-- <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          default-expand-all="true"
        />-->
        <el-tree
          :data="vectorLayerData"
          show-checkbox
          node-key="id"
          default-expand-all="true"
          :default-checked-keys="[1]"
          :expand-on-click-node="false"
          @check-change="vectorLayerCheckChange"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span class="title-item">{{ node.label }}</span>
              <span class="img-box" v-if="!data.children">
                <img :src="getModelTree(data.icon)" />
              </span>
            </span>
          </template>
        </el-tree>
      </div>
    </div>
    <!-- 下方按钮 -->
    <div class="btn-bottom">
      <div class="btn-top-heard" @click="searchBtn(2)">
        <span class="btn-img-left btn-img-left1"></span>
        <span class="btn-text">基础底图</span>
        <span
          class="btn-img-right"
          :class="{ active: btnShow === 2 ? true : false }"
        ></span>
      </div>
      <div class="btn-top-body" v-if="btnShow === 2">
        <el-tree
          :data="baseLayerData"
          show-checkbox
          node-key="id"
          :default-expanded-keys="[2, 3]"
          :default-checked-keys="[71, 74]"
          :props="defaultProps"
          default-expand-all="true"
          @check-change="baseMapLayerCheckChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import emitter from "@/utils/bus";
import { getModelTree } from "@/utils/loadAssets";
//添加JSON
import service_layers from "@/assets/data/map_data/service_layers.json";
const btnShow = ref(0);
const imgTop = ref(false);
const imgBottom = ref(false);
const vectorLayerData = reactive(service_layers.vectorLayers);
const baseLayerData = reactive(service_layers.baseMapLayers);
const vectorLayerCheckChange = (data, checked, indeterminate) => {
  if (data.lyType != undefined) {
    const item = {
      id: data.id,
      name: data.label,
      lyType: data.lyType,
      lyIndex: data.lyIndex,
      url: data.url,
      isShow: checked,
    };
    emitter.emit("layerOperation", item);
  }
};
const baseMapLayerCheckChange = (data, checked, indeterminate) => {
  if (data.lyType != undefined) {
    const item = {
      id: data.id,
      name: data.label,
      lyType: data.lyType,
      lyIndex: data.lyIndex,
      url: data.url,
      isShow: checked,
    };
    emitter.emit("layerOperation", item);
  }
};
const searchBtn = (index) => {
  if (btnShow.value === index) {
    btnShow.value = 0;

    return;
  }
  btnShow.value = index;
};
</script>

<style lang="less" scoped>
.layer-box {
  width: 100%;
  height: 100%;
  // 上方按钮
  .btn-top-heard {
    width: 100%;
    height: 40px;
    background-color: #ffff;
    border: 1px solid rgba(22, 155, 213, 1);
    border-radius: 5px 5px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    .btn-img-left {
      height: 27px;
      width: 27px;
      margin-left: 8px;
      background: url("@/assets/images/basicsConfig/u17.png") no-repeat;
      background-size: 100% 100%;
    }
    .btn-img-left1 {
      background: url("@/assets/images/basicsConfig/u8.png") no-repeat;
      background-size: 100% 100%;
    }

    .btn-text {
      color: blue;
    }
    .btn-img-right {
      height: 27px;
      width: 27px;
      margin-right: 8px;
      background: url("@/assets/images/basicsConfig/u7.png") no-repeat;
      background-size: 100% 100%;
    }
    .active {
      background: url("@/assets/images/basicsConfig/u6.png") no-repeat;
      background-size: 100% 100%;
    }
  }
  .btn-top {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    .btn-top-body {
      width: 100%;
      height: 270px;
      // background-color: #ffffff;
      background: rgba(255, 255, 255, 0.7);
      overflow-y: auto;
      border: 1px solid rgba(22, 155, 213, 1);
      border-top: 0px;
      :deep(.el-tree) {
        background: transparent;
      }
      .custom-tree-node {
        display: flex;
        .title-item {
          width: 80px;
        }
        .img-box {
          margin-left: 10px;
          width: 20px;
          height: 20px;
          img {
            width: 20px;
            height: 20px;
          }
        }
      }
    }
  }
  .btn-bottom {
    width: 100%;
    margin-bottom: 0px;
    .btn-top-body {
      width: 100%;
      height: 270px;
      border: 1px solid rgba(22, 155, 213, 1);
      // background-color: #ffffff;
      background: rgba(255, 255, 255, 0.7);
      border-top: 0px;
      overflow-y: auto;
      :deep(.el-tree) {
        background: transparent;
      }
    }
  }
}
</style>
